<template>
	<view>
		<!-- 顶部话题榜 -->
		<view class="items">
			<view class="item">
				<navigator url="../video/video.vue">
					<view class="item-x">追踪</view>
				</navigator>
				<navigator url="../video/video.vue">
					<view class="item-x"><text class="item-xx">话题榜</text></view>
				</navigator>
				<navigator url="../video/video.vue">
					<view class="item-x">观点榜</view>
				</navigator>
				<image class="item-y" style="width: 35rpx;height: 35rpx;" src="../../../static/fangda.png" mode=""></image>
			</view>
		</view>
		 <view class="bt"></view>
		 
		 <!-- 话题一-->
		 <view class="ht">
		 	<view>
		 		<image class="a" src="../../../static/shu1.png" mode=""></image>
		 	</view>
			<view class="hts">
				<view class="b"><text class="item-xx">曼联客场不败场次在英超排名第二，阿纳森27次客场不败</text></view>
				<view class="c">
					曼联客场对战阿斯顿维拉，这场比赛的结果对于现阶段的曼联来说影响并不是很大，但如果曼联一旦输球，他们的同城死敌曼城就将提前加冕本赛季英超
					冠军在这样的大背景下，曼联众将士自然不愿意间接助攻死敌夺冠，因此在上半场落后的情况下，曼联在下半场发起了猛烈的反扑，最终红魔以3-1的
					比分战胜了对手
				</view>
				<view class="d">
					<view class="hotimage">
						<image class="img1" src="../../../static/8.png" mode=""></image>
						<image class="img2" src="../../../static/8.png" mode=""></image>
						<image class="img3" src="../../../static/8.png" mode=""></image>
						<image class="img4" src="../../../static/8.png" mode=""></image>
					</view>
					<!-- 新闻1 -->
					<view class="hotimage-x">
						119观众
					</view>
				</view>
			</view>
		 </view>
		 <view class="ht">
		 	 <view>
		 	 	<image class="a" style="width: 30rpx; height: 30rpx;" src="../../../static/shu2.png" mode=""></image>
		 	 </view>
			 <view class="hts">
			 	<view class="b"><text class="item-xx">#司机为救婴闯红灯儿#</text></view>
				<view class="c">网红的司机为救婴儿连闯3红灯，警察查实后取消处罚</view>
				<view class="d">
					<view class="hotimage">
						<image class="img1" src="../../../static/8.png" mode=""></image>
						<image class="img2" src="../../../static/8.png" mode=""></image>
						<image class="img3" src="../../../static/8.png" mode=""></image>
						<image class="img4" src="../../../static/8.png" mode=""></image>
					</view>
					<!-- 新闻1 -->
					<view class="hotimage-x">
						1419观点
					</view>
					<view class="hotimage-y">
						热
					</view>
				</view>
			 </view>
		 </view>
	</view>
</template>

<script>
	export default {
		data() {
			return {
				
			}
		},
		methods: {
			
		}
	}
</script>

<style>
    .hotimage {
		margin-right: 120rpx;
	}
	.hotimage-x {
		margin-right: 15rpx;
		font-size: 25rpx;
	}
	.hotimage image {
		width: 30rpx;
		height: 30rpx;
		position: absolute;
	}
	.hotimage .img1 {
		left: 20rpx;
	}
	.hotimage .img2 {
		left: 40rpx;
	}
	.hotimage .img3 {
		left: 60rpx;
	}
	.hotimage .img4 {
		left: 90rpx;
	}
	.hotimage .imgs {
		margin-left: 1000rpx;
	}
	.hotimage .img6{
		margin-right: 700rpx;
	}
	.items{
		position: fixed;
		z-index: 1;
		background-color: #ffffff;
		width: 100%;
	}
	.bt{
		width: 100rpx;
		height: 70rpx;
	}
	.item {
		display: flex;
		flex-direction: row;
		margin: 5rpx 10rpx 20rpx 10rpx;
		color: #333333;
		background-color: #ffffff;
	}
	.item-x {
		margin-right: 45rpx;
	}
	.item-y{
		margin-top: 10rpx;
		margin-left: 180rpx;
	}
	.hotimage-y{
		border: 1rpx solid #dd524d;
		width: 30rpx;
		text-align: center;
		color: #dd524d;
		border-radius: 10rpx;
		font-size: 17rpx;
		height: 32rpx;
	}
	.item-xx {
		font-weight: bold;
	}
	.ht {
		border-bottom: 1rpx solid #ccd0d9;
	}
	.checkbox-item {
		color: #dd524d;
		width: 20rpx;
		height: 20rpx;
	}
	.hts {
		margin-left: 20rpx;
	}
	.c{
		margin-top: 13rpx;
	}
	.a {
		width: 30rpx;
		height: 30rpx;
		margin-top: 13rpx;
	}
	.d {
		margin-bottom: 20rpx;
		display: flex;
		flex-direction: row;
		white-space: nowrap;
		margin-top: 13rpx;
	}
</style>
